<template>
  <div>
    <div class="header_title">1.实现效果一(数字随机滚动)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo1_1" effect="auto" color="#00bcd4" :count="5"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo1_2" effect="auto" :count="10"></ComponentEffectsNumber>
      </div>
    </div>

    <div class="header_title">2.实现效果二(数字随机滚动)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo2_1" effect="auto" :count="5" :loop="true"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo2_2" color="#00bcd4" effect="auto" :count="8" :loop="true">
        </ComponentEffectsNumber>
      </div>
    </div>


    <div class="header_title">3.实现效果三(数字自动增长（可用于计数等场景）)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo3_1" effect="compute" color="red" :startnum="0" :count="5">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo3_2" effect="compute" :step="-1" :startnum="99999" :count="5">
        </ComponentEffectsNumber>
      </div>
    </div>

    <div class="header_title">4.实现效果四(数字自动增加到指定数据)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo4_1" effect="fixed" color="#9c27b0" :endnum="54362" :count="5">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo4_2" effect="fixed" :startnum="99999" :count="5"></ComponentEffectsNumber>
      </div>
    </div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo4_3" effect="fixed" color="#9c27b0" :startnum="52362" :endnum="54362" :count="5">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo4_4" effect="fixed" :startnum="99999" :endnum="11111" :count="5">
        </ComponentEffectsNumber>
      </div>
    </div>

    <div class="header_title">5.实现效果五(千分位的支持)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo5_1" effect="fixed" color="#9c27b0" :endnum="12564" :count="5" separator=",">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo5_2" effect="auto" :count="9" separator="-" :loop="true">
        </ComponentEffectsNumber>
      </div>
    </div>

    <div class="header_title">6.实现效果六(动画自动开启)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo6_1" effect="fixed" color="#9c27b0" :endnum="54365" :count="5" separator=","
          :autoplay="true"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo6_2" effect="auto" :count="9" separator="," :loop="true" :autoplay="true">
        </ComponentEffectsNumber>
      </div>
      <div class="item">
        <ComponentEffectsNumber ref="demo6_3" effect="compute" color="#9c27b0" :startnum="0" :count="4" separator=","
          :autoplay="true"></ComponentEffectsNumber>
      </div>
    </div>

    <div class="header_title">7.实现效果六(小数的支持)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo7_1" effect="auto" :count="9" :loop="true" :autoplay="true" :decimals="5"
          color="#9c27b0" fontSize="18px" fontWeight="blod"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo7_2" effect="fixed" :startnum="54365" :count="5" :autoplay="true" :decimals="2">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo7_3" effect="fixed" :startnum="6666.55" :count="6" separator="," :decimals="2"
          :autoplay="true"></ComponentEffectsNumber>
      </div>
    </div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo7_4" effect="compute" :startnum="0" :count="4" :decimals="3" :autoplay="true">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo7_5" effect="compute" :startnum="54.365" :count="5" :autoplay="true"
          :step="-0.001" :decimals="3" color="red"></ComponentEffectsNumber>
      </div>
    </div>
    <div class="header_title">8.实现效果七(通过配置指定会否需要将数字分隔开)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_1" effect="auto" :count="9" :loop="true" :autoplay="true" :decimals="5">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_2" effect="fixed" :startnum="54365" :count="5" :autoplay="true" :decimals="2">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_5" effect="compute" :startnum="54.365" :count="5" :autoplay="true"
          :step="-0.001" :decimals="3" fontSize="82px" colWidth="50px" colHeight="80px"></ComponentEffectsNumber>
      </div>
    </div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_1" effect="auto" :count="6" :loop="true" :autoplay="true" :decimals="5"
          :split="10" bgcolor="#00bcd4" color="#fff" colWidth="30px" colHeight="40px"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_2" effect="fixed" :startnum="54365" :count="5" :autoplay="true" :decimals="2"
          :split="20" bgcolor="#f44336" color="#fff" :endnum="666.66" colWidth="30px" colHeight="40px">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_5" effect="compute" :startnum="51.365" :count="5" :autoplay="true"
          :decimals="3" :split="10" bgcolor="#000" color="#fff" :endnum="666.66" colWidth="30px" colHeight="40px">
        </ComponentEffectsNumber>
      </div>
    </div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_1" effect="auto" :count="6" :loop="true" :autoplay="true" :decimals="5"
          :split="14" bgcolor="#000" radius="5px" color="#fff" colWidth="30px" colHeight="40px"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_2" effect="fixed" :startnum="543.65" :count="5" :autoplay="true" :decimals="2"
          :split="3" bgcolor="#f44336" radius="100%" color="#fff" :endnum="966.66" colWidth="30px" colHeight="30px">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo8_5" effect="compute" :startnum="33.666" :count="5" :autoplay="true"
          :step="-0.001" :decimals="3" :split="5" color="green" colWidth="30px" colHeight="40px" radius="5px"
          borderWidth="2px" borderColor="red" borderStyle="solid"></ComponentEffectsNumber>
      </div>
    </div>
    <div class="header_title">9.实现效果八(指定开始数字和截止数据)：</div>
    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo9_1" effect="compute" :startnum="54365" :count="5" :autoplay="true" :split="2"
          :step="2" :endnum="54375"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo9_2" effect="compute" :startnum="54.365" :count="5" :autoplay="true"
          :step="-0.001" :decimals="3" :endnum="54.355"></ComponentEffectsNumber>
      </div>
    </div>

    <div>
      <div class="item">
        <ComponentEffectsNumber ref="demo9_3" effect="fixed" :startnum="54365" :count="5" :autoplay="true" :split="11"
          bgcolor="green" color="#fff" :endnum="66666" colWidth="30px" colHeight="40px"></ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo9_3" effect="fixed" :startnum="543.65" :count="5" :autoplay="true" :decimals="2"
          :split="5" bgcolor="#000" color="#fff" :endnum="666.66" colWidth="30px" colHeight="40px">
        </ComponentEffectsNumber>
      </div>
      <div class="split"></div>
      <div class="item">
        <ComponentEffectsNumber ref="demo9_4" effect="fixed" :startnum="54.365" :count="5" :autoplay="true" :decimals="3"
          :split="3" bgcolor="#666" color="red" :endnum="12.355" colWidth="30px" colHeight="40px">
        </ComponentEffectsNumber>
      </div>
    </div>
  </div>
</template>

<script setup>
import ComponentEffectsNumber from "./../components/ComponentEffectsNumber.vue"
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount
} from 'vue'
/**
   * 1.数字自动增加到指定值时，需从指定值开始，到达目的值，目前开始的值是0；
   * 2.添加数字自动减少等指定值得功能
   * 3.数字递增或递减时，可以指定每次递增或递减的步长
   */

const demo1_1 = ref();
const demo1_2 = ref();

const demo2_1 = ref();
const demo2_2 = ref();

const demo3_1 = ref();
const demo3_2 = ref();

const demo4_1 = ref();
const demo4_2 = ref();
const demo4_3 = ref();
const demo4_4 = ref();

const demo5_1 = ref();
const demo5_2 = ref();

onMounted(() => {
  demo1_1.value.start();
  demo1_2.value.start();

  demo2_1.value.start();
  demo2_2.value.start();

  demo3_1.value.start();
  demo3_2.value.start();

  demo4_1.value.start();
  demo4_2.value.start();
  demo4_3.value.start();
  demo4_4.value.start();

  demo5_1.value.start();
  demo5_2.value.start();
});
</script>
<style scoped>.item {
  display: inline-block;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.split {
  width: 2px;
  background: #252525;
  height: 30px;
  display: inline-block;
  margin-right: 20px;
}</style>